<template>
  <div class="list">
    <van-sticky class="nav">
      <!-- 顶部导航 -->
      <van-nav-bar class="topNaV" @click-left="onClickLeft">
        <template #title>
          <p class="title">分类</p>
        </template>
        <template #left>
          <van-icon name="arrow-left" color="#666666" />
          <p class="left">返回</p>
        </template>
      </van-nav-bar>
      <van-tabs v-model:active="activeName" @click-tab="upList" sticky>
        <van-tab
          v-for="item in navData"
          :key="item.id"
          :title="item.name"
          :name="item.name"
        >
        </van-tab>
      </van-tabs>
    </van-sticky>
    <div class="two">
      <div class="banner">
        <p class="banner-name">{{ name }}</p>
        <p class="banner-desc">{{ desc }}</p>
      </div>

      <!-- 商品列表 -->
      <div class="goods" v-if="isshow">
        <div
          v-for="item in list"
          :key="item.id"
          class="good-list"
          @click="goDetail(item.id)"
        >
          <img :src="item.list_pic_url" alt="" class="good-img" />
          <p class="good-name">{{ item.name }}</p>
          <p class="good-price">{{ item.retail_price }}起</p>
        </div>
      </div>
      <!-- 没有商品 -->

      <div v-else class="nodata">
        <div class="text">
          <p>数据库暂无数据...</p>
        </div>
        <div class="box"></div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { categoryNav, categoryList } from '@/api/category/index'
import { useRoute, useRouter } from 'vue-router'
import { ref } from 'vue'
const navData = ref([])
const currentNav = ref({})
const activeName = ref('')
const list = ref([])
const name = ref('')
const desc = ref('')
const isshow = ref(true)
const route = useRoute()
const router = useRouter()
// console.log(route)
// 分类导航

categoryNav({ id: route.params.id }).then(res => {
  console.log(res)
  navData.value = res.navData
  currentNav.value = res.currentNav
  activeName.value = res.currentNav.name
  name.value = res.currentNav.name
  desc.value = currentNav.value.front_desc
})
// 获取分类商品列表
categoryList({ categoryId: route.params.id }).then(res => {
  list.value = res.data
})
// 1
const upList = ({ title }) => {
  console.log(title)
  const id = navData.value.find((el) => el.name === title).id
  name.value = title
  desc.value = navData.value.find((el) => el.name === title).front_desc
  categoryList({ categoryId: id }).then(res => {
    list.value = res.data
  })
}
// 2
const goDetail = (id) => {
  router.push({ name: 'categoryDetail', params: { id: id } })
}
// 3
const onClickLeft = () => {
  router.back()
}
</script>
<script>
export default {
  name: 'secCategory'
}
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.list {
  .nav {
    .topNav {
      .left {
        font-size: 31.2px;
        color: #666666;
        letter-spacing: 0;
        font-weight: 400;
      }

      .title {
        font-size: 36px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 500;
      }
    }
  }
  .two {
    width: 750px;
    background-color: #f8f8f8;
    padding-top: 20px;
    overflow: hidden;
    .banner {
      background: #f9f4e5;
      border: 1px solid rgba(235, 220, 173, 1);
      width: 708px;
      height: 148px;
      margin: 0px 20px 20px;
      overflow: hidden;
      text-align: center;
      .banner-name {
        font-size: 32px;
        color: #000000;
        letter-spacing: 0;
        font-weight: 500;
        margin: 29px auto 0;
        line-height: 45px;
        height: 45px;
      }
      .banner-desc {
        font-size: 28px;
        color: #666666;
        letter-spacing: 0;
        font-weight: 400;
        line-height: 40px;
        height: 40px;
        margin-top: 4px;
      }
    }
    .goods {
      display: flex;
      flex-wrap: wrap;
      width: 710px;
      margin: 0 auto;
      overflow: hidden;
      .good-list {
        width: 350px;
        display: flex;

        flex-wrap: wrap;
        justify-content: space-between;
        .good-img {
          width: 350px;
          height: 350px;
        }
        .good-name {
          width: 350px;
          font-size: 26px;
          color: #333333;
          letter-spacing: 0;
          font-weight: 500;
          margin-top: 17px;
          height: 37px;
          line-height: 37px;
          text-align: left;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .good-price {
          font-size: 26px;
          color: #9e4242;
          letter-spacing: 0;
          font-weight: 400;
          height: 37px;
          line-height: 37px;
          margin-top: 8px;
          margin-bottom: 44px;
          text-align: left;
        }
      }
      .good-list:nth-child(2n) {
        margin-left: 10px;
      }
    }
    .nodata {
      width: 100%;
      height: 900px;
      .text {
        margin-top: 122px;
        line-height: 45px;
        height: 45px;
        font-size: 32px;
        color: #999999;
        letter-spacing: 0;
        font-weight: 400;
        text-align: center;
      }
      .box {
        width: 750px;
        height: 750px;
      }
    }
  }
}
</style>
